<template>
      <el-row type="flex" class="search" justify="center">
        <el-col :span="18">
          <div class="funcTabWrap  acea-row row-between-wrapper">
              <div class="f-logo">
                   <router-link
                   :to="'/'">
                      <img :src="logoUrl" alt="logo">
                   </router-link>
              </div>
              <div class="f-search acea-row row-between-wrapper">
                   <div class="s-search">
                       <form @submit.prevent="submit">
                            <el-input placeholder="点击搜索商品"  size="large" v-model="search"  >
                                <p slot="prepend" class="el-icon-search" st></p>
                                <el-button slot="append" @click="submit"><p>搜索</p></el-button>
                            </el-input>
                        </form>
                  </div>
                  <div class="s-car">
                        <router-link :to="'/cart'">
                          <el-button round >
                                <div class="el-icon-shopping-cart-2 carBuy" > 购物车<el-badge :value="CartCount"><p class="badge"> </p></el-badge></div>
                          </el-button>   
                        </router-link>              
                  </div>
              </div>
          </div>
        </el-col>
      </el-row>
</template>
<script> 
import { getSearchKeyword } from "@api/store";
import { trim } from "@utils";
import { getCartCount } from "@api/store";
import { getHomeData } from "@api/public";
import { mapGetters } from "vuex";

export default {
    name:"SearchBox",
    data:function(){
        return {
            logoUrl:"",
            keywords: [],
            search: "",
            CartCount: 0,
        }
    },
    computed: mapGetters(["isLogin"]),
    mounted: function() {
      let that = this;
      getHomeData().then(res => {
         that.logoUrl = res.data.logoUrl;
       });
       that.getCartCount();
    },
    methods: {

    submit() {
      const search = trim(this.search) || "";
      if (!search) return;
      this.toSearch(search);
    },
     //获取购物车数量
    getCartCount: function(isAnima) {
      let that = this;
      const isLogin = that.isLogin;
      if (isLogin) {
        getCartCount({ numType: 0 }).then(res => {
          that.CartCount = res.data.count;
          //加入购物车后重置属性
          if (isAnima) {
            that.animated = true;
            setTimeout(function() {
              that.animated = false;
            }, 500);
          }
        });
      }
    },
    toSearch(s) {
      this.$router.push({ path: "/goods_list", query: { s } });
    },
    getData() {
      getSearchKeyword().then(res => {
        this.keywords = res.data;
      });
    },
    }
    
};
</script>
<style scoped>
    .search {
        background-color: #fff;
    }
    .funcTabWrap {
        width: 1090px;
        height: 100px;
        margin: 0 auto;
      
    }
    .funcTabWrap .f-search {
        width: 720px;
        height: 100px
    }
    .funcTabWrap .f-search .s-search {
        width: 532px;
        height: 40px;
    }
    .funcTabWrap .f-search .s-car {
        width: 145px;
        height: 40px;
        font-size: 14px;
    }
    .funcTabWrap .f-search .s-car .carBuy {
        padding: 4px 20px;
        font-size: 14px;
    }
    .funcTabWrap .f-logo {
        width: 212px;
        height: 60px;
    }
      .funcTabWrap .f-search .s-car .carBuy .badge {
          width: 1px;
          height: 3px;
          margin-left: 10px;;
      }
    .funcTabWrap .f-logo img {
        width: 100%;
        height: 100%;
    }

    /* 更改elementui组件样式 */
   .funcTabWrap .f-search .s-search /deep/ .el-input-group__append  {    
          border-radius: 20px;
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
          background-color: #CC9756;
          border: 1px solid  #CC9756;
          padding: 0 30px;
          font-size: 16px;
          font-weight: 700;
          color: #fff;
    }
    .funcTabWrap .f-search .s-search /deep/ .el-input-group__prepend {
          border-radius: 20px;
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
          background-color: #fff;
          border-top: 1px solid  #CC9756;
          border-bottom: 1px solid  #CC9756;
          border-left: 1px solid  #CC9756;
          border-right: none;
          padding: 10px;
          font-size: 14px;
    }
    .funcTabWrap .f-search .s-search /deep/ .el-input__inner {
          border:none;
          border-top: 1px solid  #CC9756;
          border-bottom: 1px solid  #CC9756;
          padding: 0;
    }
</style>